<template>
	<view>
		<!-- 判断商品主图有没有视频 -->

		<!-- 如果没有视频 -->

		<!-- <block v-if="!goodData.goodVideo"> -->
		<ttBar title="拼好课详情" :bgColor="titleBg" leftIcon="icon-back" :color="wordsColor" :showZhanwei="false">
			<template v-slot:rightCnt>
				<text class="iconfont icon-gouwuche rightIcon" @tap="toCar"></text>
			</template>
		</ttBar>
		<goodSwiper :swiperList="goodData.bannerList" :dotsStyles="dotsStyles" :borderRadius="0"></goodSwiper>
		<!-- </block> -->

		<view class="groupInfo">
			<view class="priceBox">
				<text class="price">￥168</text>
				<view class="djs">
					<text >{{djsText}}</text>
				</view>
			</view>
			<view class="fanli">
				<text>阶梯团</text>
				<view class="fanliBox">
					<text v-if="groupDt.level1&&groupDt.level1==1">{{groupDt.num1}}人团返：￥{{groupDt.amount1}}/人</text>
					<text v-if="groupDt.level2&&groupDt.level2==2">{{groupDt.num2}}人团返：￥{{groupDt.amount2}}/人</text>
					<text v-if="groupDt.level3&&groupDt.level3==3">{{groupDt.num3}}人团返：￥{{groupDt.amount3}}/人</text>
				</view>
			</view>
		</view>


		<!-- 价格与标题 -->
		<view class="mainCnt goodTitleBox">
			<view class="gdTitle">{{goodData.name}}</view>
			<view class="sellBox">
				<text class="citys">{{diqu}}</text>
				<text class="sellCount">已预约：{{goodData.sold}}</text>
			</view>
		</view>

		<!-- 课程tag -->
		<view class="mainCnt classTagBox" v-if="goodData.labels.length>0">
			<text v-for="(item,idx) in goodData.labels" :key="idx">{{item}}</text>
		</view>

		<!-- 课程保障 -->
		<view class="mainCnt classEnsure" @tap="toPage" data-url="baozhang">
			<text class="title">保障</text>
			<view class="itemBox">
				<view class="ensureItem" v-for="(item,index) in goodData.protectList" :key="index">
					<text class="iconfont icon-yuanxingxuanzhong"></text>
					<text>{{item.name}}</text>
				</view>
			</view>
			<text class="iconfont icon-right"></text>
		</view>

		<!-- 商品评论 -->
		<goodEvaluate :cid="goodData.id" :cname="goodData.name"></goodEvaluate>
		
		<!-- 店铺卡片 -->
		<shop-card :shopInfo="goodData.store"></shop-card>

		<courseParameter :goodParameter="goodData" :shichang="shichang"></courseParameter>
		<view class="htmlBox">
			<text class="dtText">{{goodData.intro}}</text>
			<block v-for="(item,index) in goodData.detailList" :key="index">
				<view v-if="item.type==1">
					<image :src="item.url" mode="widthFix"></image>
				</view>
			</block>
			<view class="xuzhiBox">
				<view class="xzTitle">消费流程</view>
				<text v-for="(item,index) in liucheng" :key="item">{{item}}</text>
				<view class="xzTitle">消费须知</view>
				<text v-for="(item,index) in xuzhi" :key="item">{{item}}</text>
				<view class="xzTitle" v-if="fuwu.length>0">商家服务</view>
				<view class="fuwuBox">
					<text v-for="(item,index) in fuwu" :key="item">{{item}}</text>
				</view>
				<view class="xzTitle" v-if="tishi.length>0" >温馨提示</view>
				<text v-for="(item,index) in tishi" :key="item" >{{item}}</text>
			</view>
		</view>
		
		<view class="goodBtm">
			<view class="goodOp">
				<view class="item" @tap="zixun">
					<text class="iconfont icon-message"></text>
					<text>咨询</text>
				</view>
				<view class="btnBox">
					<button @tap="onlyOpen" :disabled="goodData.stock<1">只开团不上课</button>
					<button @tap="buy" :disabled="goodData.stock<1">
						
						<text>最高返￥{{mFanli}}</text>
						<text>立即开团</text>
					</button>
					
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	import ttBar from "@/components/ttBar/ttBar.vue";
	import goodSwiper from "@/components/goodSwiper/goodSwiper.vue";
	import statusBar from "@/components/statusBar/statusBar.vue";
	import goodEvaluate from "@/components/goodEvaluate/goodEvaluate.vue";
	import courseParameter from "@/components/courseParameter/courseParameter.vue";
	import COMM from "@/common/common.js";
	import PRSN from "@/js_sdk/wa-permission/permission.js";
	import parser from "@/components/jyf-Parser/index";
	import shopCard from "@/components/shopCard/shopCard.vue";
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from "vuex";
	export default {

		components: {
			ttBar,
			goodSwiper,
			statusBar,
			goodEvaluate,
			courseParameter,
			parser,
			shopCard,
		},
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin,
			})
		},
		data() {
			return {
				stusBarHt: uni.getSystemInfoSync().statusBarHeight,
				videoHeight: uni.getSystemInfoSync().screenWidth,
				titleHeight: uni.getSystemInfoSync().statusBarHeight + uni.upx2px(90),
				titleBg: 'rgba(255,255,255,0)',
				wordsColor: '#FFFFFF',
				backImgSrc: '../../static/back-white.png',
				carImgSrc: '../../static/car-white.png',
				titleBgTop: 0,
				isPlay: true,
				goodData: {
					name:'课程名称',
					price:0,
					labels:[]
				},
				shopInfo:{},
				liucheng:[],
				xuzhi:[],
				fuwu:[],
				tishi:[],
				dotsStyles: {
					width: 6,
					height: 4,
					bottom: -10,
					backgroundColor: '#c5c3c6',
					border: 'none',
					selectedBackgroundColor: '#ff6902',
					selectedBorder: 'none',
					borderRadius: 2
				},
				shichang:'',
				diqu:'',
				id:0,
				gid:0,
				groupDt:null,
				mFanli:0,
				djsText:'0天0:0:0'
			};
		},
		methods: {
			getData() {
				this.$store.dispatch("apiGetGroupDetail",{
					id:this.gid
				}).then(res=>{
					this.groupDt=res.data.data
					this.goodData = res.data.data.course;
					this.getCircle();
					this.shichang=COMM.getTm(res.data.data.course.time);
					this.liucheng=res.data.data.course.consIncs.costflow.split("\n");
					this.xuzhi=res.data.data.course.consIncs.costkown.split("\n");
					res.data.data.course.consIncs.serviceChecked.split(",").filter((x)=>{
						if(x=='1'){
							this.fuwu.push('免费停车位')
						}else if(x=='2'){
							this.fuwu.push('免费wifi')
						}else if(x=='3'){
							this.fuwu.push('免费热饮')
						}
						return !!x;
					});
					let r=res.data.data.course.consIncs.costkown2.tailCut().split("\n");
					this.tishi=r.filter((x)=>{
						return !!x;
					})
					
					this.shopInfo=res.data.data.course.store
					if(res.data.data.level3&&res.data.data.level3==3){
						this.mFanli=res.data.data.amount3
					}else if(res.data.data.level2&&res.data.data.level2==2){
						this.mFanli=res.data.data.amount2
					}else{
						this.mFanli=res.data.data.amount1
					}
					setInterval(()=>{
						this.daojishi()
					},1000)
					
					
				})
			},
			getCircle(){
				this.$store.dispatch("apiGetShopDetail",{
					id:this.goodData.storeId,
					userId:this.isLogin?this.userInfo.userId:0
				}).then(res=>{
					let ssq=COMM.getSSQByAreaId(res.data.data.areaId);
					if(res.data.data.streetId){
						this.$store.dispatch("apiGetBusCircle",res.data.data.areaId).then(circleRes=>{
							circleRes.data.data.forEach((x,i)=>{
								if(x.id==res.data.data.streetId){
									this.diqu=x.name
								}
							})
						})
					}else{
						this.diqu=ssq[2]
					}
					
				})
			},
			onlyOpen() {
				if (this.isLogin) {
					this.$store.dispatch("apiOpenGroup", {
						userId: this.userInfo.userId,
						activeId:this.groupDt.id
					}).then(res => {
						uni.showToast({
							title: '开团成功',
							icon: 'success'
						});
						// this.toPage("car")
					})
				} else {
					this.toPage({
						url:'login',
						gid:this.goodData.id,
						to:'openGroup'
					})
				}
			},
			toCar(){
				if (this.isLogin) {
					this.toPage("car")
				} else {
					this.toPage({
						url:'login',
						to:'car'
					})
				}
			},
			buy() {
				if (this.isLogin) {
					this.$store.dispatch("apiOpenGroup", {
						userId: this.userInfo.userId,
						activeId:this.groupDt.id
					}).then(res => {
						let cfmArr = [this.goodData];
						uni.setStorage({
							key: 'confirmList',
							data: cfmArr,
							complete: () => {
								this.toPage({
									url: 'confirmOrder',
									isGroup:1,
									gpId:res.data.data.id
								})
							}
						})
					})
					

				} else {
					let cfmArr = [this.goodData];
					uni.setStorage({
						key: 'confirmList',
						data: cfmArr,
						complete: () => {
							this.toPage({
								url:'login',
								gid:this.goodData.id,
								to:'confirmOrder'
							})
						}
					})
				}
			},
			daojishi(){
				let _now=new Date();
				let _end=new Date(Date.parse(this.groupDt.endTime.replace(/-/g, "/")));
				
				let _leftTime=_end.getTime()-_now.getTime();
				if(_leftTime>0){
					let _day= Math.floor(_leftTime/(1000*60*60*24));
					let _hour=Math.floor(_leftTime/(1000*60*60)%24);
					let _min= Math.floor(_leftTime/(1000*60)%60);
					let _sec= Math.floor(_leftTime/1000%60);
					this.djsText='距离结束 '+ _day + "天" + _hour + ":" + _min + ":" + _sec;  
				}else{
					this.djsText='该活动已结束'
				}
				
			},
			zixun() {
				let _this = this;
				if (this.isLogin) {
					uni.showLoading({
						title: '',
						mask: false
					});
					
					let toImid = _this.shopInfo.imid;
					if (getApp().globalData.TIM_SDK_READY) {
						uni.hideLoading()
						_this.toPage({
							url: 'conversationDt',
							cvid: 'C2C' + toImid,
							toImId: toImid,
							sname:_this.goodData.store.name,
							slogo:_this.goodData.store.logo,
							sid:_this.goodData.store.id
						})
					} else {
						_this.$store.dispatch("timLogin",_this.userInfo.imid).then(res=>{
							setTimeout(() => {
								uni.hideLoading()
								_this.toPage({
									url: 'conversationDt',
									cvid: 'C2C' + toImid,
									toImId: toImid,
									sname:_this.goodData.store.name,
									slogo:_this.goodData.store.logo,
									sid:_this.goodData.store.id
								})
							}, 1000)
						})
					}
				} else {
					this.toPage("login")
				}
			}
		},
		onLoad(cfm) {
			// 监听页面返回事件
			uni.$on('update', function(data) {
				console.log(data);
			})
			this.gid=cfm.gid;
			this.getData();
			

		},
		onUnload() {

		},
		onPageScroll(e) {
			var _this = this;
			if (e.scrollTop > this.videoHeight) {
				this.titleBg = 'rgba(255,255,255,1)';
				this.wordsColor = "#000000";
			} else {
				this.titleBg = 'rgba(255,255,255,0)';
				this.wordsColor = "#FFFFFF";
			}
			uni.$on("loginNext",()=>{
				
			})
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData()
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	@import "../../common/public.less";

	/* #ifdef MP */
	.titleBg {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;

	}

	.goodTitle {
		position: fixed;
		width: 100%;
		height: 90upx;
		line-height: 90upx;
		text-align: center;
		left: 0;
		padding-right: 28%;
		box-sizing: border-box;
		font-size: 36upx;
	}

	.backBtn {
		position: fixed;
		width: 60upx;
		height: 60upx;
		margin-top: 16upx;
		left: 28upx;
	}

	.carBtn {
		position: fixed;
		width: 60upx;
		height: 60upx;
		margin-top: 16upx;
		right: 28%;
	}

	/* #endif */


	.mainCnt {
		padding: 0 28upx;
	}
	.groupInfo{
		background:linear-gradient(to right,#fa3074,#f86266);
		display: flex;
		flex-direction: column;
		color: #FFFFFF;
		padding-bottom: 20upx;
		.priceBox{
			display: flex;
			padding: 10upx 20upx 10upx 40upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.price{
				font-size: 56upx;
				font-weight: bold;
			}
			.price:first-letter{
				font-size: 40upx;
			}
			.djs{
				font-size: 26upx;
				background-color: rgba(0,0,0,0.2);
				height: 40upx;
				border-radius: 20upx;
				line-height: 40upx;
				padding: 0 30upx;
				text:first-child{
					margin-right: 10upx;
				}
			}
		}
		.fanli{
			display: flex;
			padding: 0upx 80upx;
			>text{
				flex-shrink: 0;
				font-size: 28upx;
				font-weight: bold;
				margin-right: 20upx;
			}
			.fanliBox{
				display: flex;
				flex-direction: column;
				font-size: 28upx;
			}
		}
	}
	.goodTitleBox {
		background-color: #FFFFFF;
		margin-top: 13upx;
		border-bottom: 13upx solid #f4f4f4;
		padding-bottom: 24upx;

		.goodPrice {
			font-size: 64rpx;
			color: #ff3b2b;
			font-weight: bold;

		}

		.goodPrice:first-letter {
			font-size: 48rpx;
		}

		.gdTitle {
			font-size: 36rpx;
			font-weight: bold;
			color: #202932;
		}

		.sellBox {
			display: flex;
			margin-top: 32upx;
			justify-content: space-between;

			text {
				font-size: 26rpx;
				color: #959ca6;
			}
		}
	}

	.classTagBox {
		background-color: #FFFFFF;
		display: flex;
		flex-wrap: wrap;
		padding: 16upx 28upx;
		border-bottom: 13upx solid #f4f4f4;

		text {
			padding: 0 20upx;
			height: 42rpx;
			border-radius: 13rpx;
			border: solid 2rpx #e5bc7a;
			line-height: 40upx;
			font-size: 31rpx;
			color: #e5bc7a;
			margin-right: 15upx;
		}
	}

	.classEnsure {
		background-color: #FFFFFF;
		padding: 20upx 28upx;
		border-bottom: 13upx solid #f4f4f4;
		display: flex;
		align-items: baseline;

		.title {
			font-size: 30rpx;
			color: #2c2c2c;
			margin-right: 30upx;
		}

		.itemBox {
			flex-grow: 1;
			display: flex;
			justify-content: flex-start;

			.ensureItem {
				display: flex;
				align-items: center;
				margin-right: 20upx;

				>text {
					font-size: 24upx;
					color: #2c2c2c;
				}

				.iconfont {
					font-size: 32upx;
					margin-right: 6upx;
				}
			}
		}
	}

	.goodEval {
		background-color: #FFFFFF;
		padding: 30upx 28upx;
		border-bottom: 13upx solid #f4f4f4;
	}

	.htmlBox {
		padding: 0 28upx;
		padding-bottom: 180upx;
		display: flex;
		flex-direction: column;
		.dtText{
			margin-bottom: 20upx;
			font-size: 32upx;
			color: #202932;
		}
		image{
			width: 100%;
		}
	}
	.xuzhiBox{
		padding-top: 20upx;
		display: flex;
		flex-direction: column;
		.xzTitle{
			font-size: 32upx;
			font-weight: bold;
			color: #202932;
			margin-bottom: 10upx;
		}
		text{
			font-size: 28upx;
			margin-bottom: 10upx;
			color: #202932;
		}
		.fuwuBox{
			display: flex;
			text{
				display: block;
				width: 33.33%;
			}
			
		}
	}

	.goodBtm {
		position: fixed;
		width: 100%;
		height: 105upx;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		z-index: 2;
		.priceBox {
			height: 75upx;
			display: flex;
			align-items: center;
			background-color: #f8e4a9;
			padding: 0 50upx;

			.iconfont {
				font-size: 40upx;
				color: #ff3b2b;
				margin-right: 16upx;
			}

			text {
				font-size: 32upx;
				color: #a17f68;
			}

			.yyPrice {
				color: #ff3b2b;
				font-size: 38upx;
				flex: 1;
			}

			.zaifu {
				color: #a17f68;
				font-size: 38upx;
			}
		}
		.stockNull{
			background-color: #333333;
			color: #FFFFFF;
			line-height: 75upx;
			text-align: center;
			font-size: 28upx;
		}
		.goodOp {
			height: 105upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #FFFFFF;
			padding: 0 0 0 38upx;
			border-top: 1px solid #b5bac2;

			.item {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				text {
					color: #6b6b6b;
					font-size: 20upx;
				}

				.iconfont {
					font-size: 48upx;
					color: #2c2c2c;
				}
			}

			.btnBox {
				display: flex;
				height: 105upx;

				button {
					width: 250upx;
					border: none;
					margin: 0;
					outline: none;
					height: 105upx;
					line-height: 105upx;
					font-size: 32upx;
					color: #FFFFFF;
					font-weight: bold;
					border-radius: 0upx;
					background: linear-gradient(to right, #ffc300, #ff9503);
				}

				button:after {
					border: none;
					outline: none;
				}

				button:last-child {
					background: linear-gradient(to right, #fe5828, #fe305b);
					display: flex;
					flex-direction: column;
					line-height: 1;
					justify-content: center;
					text:first-child{
						font-weight: normal;
						font-size: 28upx;
						margin-bottom: 4upx;
					}
				}
				button[disabled=true]{
					color: #EEEEEE;
				}
			}
		}
	}
	.icon-gouwuche{
		font-size: 48upx;
	}
</style>
